import React,{Component} from 'react';
import {connect} from 'react-redux'
import mapDispatchToProps from '../actions/mapDispatchToProps'
import mapStateToProps from '../value/mapStateToProps'
import { Message } from 'element-react';
import 'element-theme-default';
 class  Flowers extends Component{
    constructor(props){
        super(props);
        this.state={
            goodmessage:[]
            
        }
     }
    componentWillMount(){
        this.props.fetchList()  
    }
    changePage=(e)=>{
        var page=e.target.getAttribute('page')
        const params={page:parseInt(page)}
        this.props.fetchList(params)
    }
    addCart(e){
       
       const idx=e.target.getAttribute('idx')
       const id=e.target.getAttribute('data-id')
       const addToCartProduct=this.props.lists.subjects[idx];
    //    this.props.addToDatabase(addToCartProduct);//这个方式直接传入数据库不合适，应该去重之后传入。在传入store之前进行操作，使store里面的数据是去重之后的。
    //    this.props.addToCart(addToCartProduct);
       var good=this.state.goodmessage;
       var index=good.indexOf(addToCartProduct)
       console.log("index",index,"good",good)
       if(index==-1){
           good.push(addToCartProduct)
           good[good.length-1].num=1
           
           this.props.addToDatabaceCart(good[good.length-1]);//加入购物车的数据库
           Message({
            message: '恭喜你，成功加入购物车',
            type: 'success'
          });
        }else{
           good[index].num+=1;
           console.log(" good[index].num", good[index])//数据OK，剩下的就是后台更新操作了
           this.props.addToDatabaceCart(good[index]);//购物车数据库更新
           Message({
            message: '恭喜你，成功加入购物车',
            type: 'success'
          });
        }
       this.setState({//加入状态
               goodmessage:good
           })
    }
    render(){      
      const {count,count1,increase,decrease,lists,carts}=this.props    
      var todolist=[];
      var outputPages=[]
      var pages=Math.ceil(lists.total/lists.count)
      for(let i=1;i<=pages;i++){
        outputPages.push(
            <li key={i}><a href="javascript:void(0)" page={i} 
            onClick={(e)=>{
                this.changePage(e);
            }}
            >{i}</a></li>
        )
      } 
 
      if(lists.subjects){
        lists.subjects.map((value,index)=>{
        var gender=[];
        value.genres.map((val)=>{
            gender.push(
                <span key={val}>{val}/ </span>
            )
        })
         todolist.push(
            <div className="col-sm-4 col-md-3" key={index}>
                <div className="thumbnail">
                <img src="http://img3.doubanio.com/view/photo/s_ratio_poster/public/p2455050536.jpg" alt={this.original_title}/>
                <div className="caption">
                    <h3>{value.title}</h3> 
                    <p>价格：{value.year}</p>               
                    <p>{gender}</p>
                    <p><a  className="btn btn-primary" role="button" data-id={value.id} idx={index} onClick={(e)=>{this.addCart(e)}}>加入购物车</a>
                     <a href="#" className="btn btn-default" role="button">进入详情页(还没做)</a></p>
                </div>
            </div>
        </div>
       // <li key={index}>{value.title}<button className="btn btn-primary"data-id={value.id} idx={index} onClick={(e)=>{this.addCart(e)}}>加入购物车</button></li>
         )
     })
      }else{
        return <div>数据加载中，请稍后</div>  
      }
 
        return (
            <div>  
                <div className="row">

                    
                    {/* <div className="col-sm-4 col-md-3">
                        <div className="thumbnail">
                        <img src="http://img7.doubanio.com/view/photo/s_ratio_poster/public/p511118051.jpg" alt="..."/>
                        <div className="caption">
                            <h3>Thumbnail label</h3>
                            <p>...</p>
                            <p><a href="#" className="btn btn-primary" role="button">Button</a> <a href="#" className="btn btn-default" role="button">Button</a></p>
                        </div>
                        </div>
                    </div> */}
                </div>
            <nav aria-label="Page navigation">
                <ul className="pagination">
                    <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    </li>
                    {outputPages}
                    <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>   

                    </li>
                </ul>
             </nav>
             <span>这里放count的数shuju据:{count}</span>  <br/>  
             <span>这里放count1的数据:{count1}</span>  <br/>   
             <button onClick={increase}>count++</button> 
             <button onClick={decrease}>count1--</button>                
                {todolist}
           </div>     
        )
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Flowers)